<template>
       <TableLayout form-title="">
            <!-- <div slot="form-title" class="table-title"></div> -->
            <el-form :model="formInline" ref="formInline" :rules="rules" 
            class="formInline" label-width="100px" slot="form" v-collapse="true">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省" prop="fProvinceId">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市" label-width="90px">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县" label-width="90px">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <school v-model="formInline.schoolName" :provinceId="formInline.fProvinceId" :cityId="formInline.fCityId" :areaId="formInline.fAreaId" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="负责人姓名" label-width="90px">
                            <el-input v-model="formInline.ownerName" placeholder="请输入负责人姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="负责人电话" label-width="90px">
                            <el-input v-model="formInline.ownerPhone" placeholder="请输入负责人电话"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="是否培训机构">
                            <el-select v-model="formInline.orgId" placeholder="请选择" style="width:100%">
                                <el-option v-for="(item,index) in orgList" :key="index" 
                                :label="item.orgName" :value="item.orgType"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                        <el-button type="primary" @click="submit('formInline')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                
            </div>
            <el-table :data="AnnounceList" border style="width: 100%" v-loading="loading">
                <el-table-column align="center" label="学校名称" min-width="120">
                     <template scope="scope">
                        {{scope.row.schoolName ?scope.row.schoolName:'--'}}
                    </template>
                </el-table-column>
                <el-table-column label="学校类型" align="center" min-width="100">
                     <template scope="scope">
                        {{!scope.row.periodName ? '--' : scope.row.periodName}}
                    </template>
                </el-table-column>
                <el-table-column label="所属地区" align="center"  min-width="120">
                    <template scope="scope">
                        {{!scope.row.belongToArea ? '--' : scope.row.belongToArea}}
                    </template>
                </el-table-column>
                <el-table-column label="详细地址" align="center" min-width="150">
                    <template scope="scope">
                        {{!scope.row.detail ? '--' : scope.row.detail}}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" min-width="150">
                     <template scope="scope">
                        {{!scope.row.createTime ? '--' : scope.row.createTime.substring(0,19)}}
                    </template>
                </el-table-column>
                <el-table-column label="创建人" align="center" min-width="140">
                      <template scope="scope">
                        {{!scope.row.creatorName ? '--' : scope.row.creatorName}}
                    </template>
                </el-table-column>
                <el-table-column label="已有图片数量" align="center" min-width="140">
                      <template scope="scope">
                        {{!scope.row.total ? '--' : scope.row.total}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="设置智慧班牌" min-width="150">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="goToSetWisdom(scope.row)">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" 
                :total="listQuery.total" 
                :current-page.sync="listQuery.page" 
                :page-sizes="config.pageSizes" 
                :page-size="config.pageSize" 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
</template>
<script>
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
import { querySchoolByPage, queryClassBySchool} from 'api/deviceManagement';
export default {
    name: 'wisdomCardList',
    components: { TableLayout, province, city, region, school},
    data() {
        return {
            formInline: {
                fProvinceId: '', // 省份
                fCityId: '', // 市区
                fAreaId: '', // 区县
                schoolId: '',
                ownerName: '',
                schoolName: '',
                ownerPhone: '',
                orgId: ''
            },
            orgList: [
                {
                    orgName: '请选择',
                    orgType: ''
                },
                {
                    orgName: '是',
                    orgType: '1'
                },
                {
                    orgName: '否',
                    orgType: '0'
                }             
            ],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: false,
            AnnounceList: [],
            rules: {
                fProvinceId: [{required: true, message: '请输入省份' }]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'uid'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val==2 && this.searchFetchData();
        }
    },
    created() {
        // this.searchFetchData();
    },
    methods: {
        ...mapActions(['ChangePageSize']),

        submit(formInline) {
            this.$refs[formInline].validate(valid => {
                if (valid) {
                    this.listQuery.page=1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },
           // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val;
            if (val) {
                queryClassBySchool(val).then(res => {
                    this.formInline.classArr=res.data.content;
                    this.formInline.classArr.unshift({sNickName: '请选择', pId: ''});
                })
            } else {
                this.formInline.classId=''
                this.formInline.classArr=[];
            }
        },
         // 查询列表
        searchFetchData() {
            this.loading = true;
            let json = {
                'curPage': this.listQuery.page, 
                'pageSize': this.config.pageSize, 
                'provinceId': this.formInline.fProvinceId,
                'cityId': this.formInline.fCityId,
                'areaId': this.formInline.fAreaId,
                'schoolId': this.formInline.schoolId,
                'orgId': this.formInline.orgId,
                'ownerName': this.formInline.ownerName,
                'ownerPhone': this.formInline.ownerPhone 
            }
            querySchoolByPage(json).then(res => {
                this.loading = false;
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
            }).catch(() => {
                this.loading = false;
            });
        },

         // 分页
        handleSizeChange(val) {
            this.ChangePageSize(val);
            this.$refs.formInline.validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                }
            })
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },

        goToSetWisdom(row) {
            this.$router.push({
                // path: `/wisdomSetting/screensaver/${row.schoolId}`
                path: `screensaver/${row.schoolId}`
            });
        }
       
    }
}
</script>
<style lang="scss" scoped>
// .el-message-box{
//     .el-message-box__content{
//         padding:20px 0px 30px;
//         .el-message-box__message {
//             p {
//                 font-size: 18px;
//                 color: #333;
//                 text-align: center;
//             }
//         }
//     }
//     .el-message-box__btns {
//         text-align: center;
//         padding-bottom:30px;
//     }
// }
 
 .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
</style>